<template>
  <div class="box">
    <div class="user-mian">
      <div class="search">
        <div class="input">
          <el-input
            size="small"
            placeholder="根据用户名搜索"
            v-model="userList.username"
          ></el-input>
        </div>
        <el-button
          size="small"
          style="width: 54px; margin-left: 15px"
          @click="clear"
          >清空</el-button
        >
        <el-button
          size="small"
          style="width: 54px"
          type="primary"
          @click="search"
          >搜索</el-button
        >
        <div class="right">
          <el-button
            size="small"
            style="width: 97px"
            type="success"
            icon="el-icon-edit"
            @click="add"
            >新增用户</el-button
          >
        </div>
      </div>
      <el-alert
        style="height: 35px; margin-bottom: 20px"
        type="info"
        :closable="false"
        show-icon
        icon-size="16px"
      >
        共 {{ list.counts }} 条记录
      </el-alert>
      <el-table
        :highlight-current-row="true"
        :data="list.list"
        style="width: 100%"
      >
        <el-table-column align="center" prop="id" label="序号" width="255px">
        </el-table-column>
        <el-table-column align="center" prop="email" label="邮箱">
        </el-table-column>
        <el-table-column
          align="left"
          prop="phone"
          label="联系电话"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="username"
          label="用户名"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="permission_group_id"
          label="权限组名称"
        >
        </el-table-column>
        <el-table-column align="center" prop="role" label="角色">
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px" >
          <template #default="scope">
            <div v-if="scope.row.id !== 2">
              <button
                style="margin-right: 5px"
                class="edit"
                @click="edit(scope.row)"
              >
                <i class="el-icon-edit"></i>
              </button>
              <button class="edit del" @click="del(scope.row)">
                <i class="el-icon-delete"></i>
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <el-pagination
          @size-change="handleSizeChange($event)"
          @current-change="handleCurrentChange($event)"
          :current-page="userList.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout=" prev, pager, next, sizes, jumper"
          :background="true"
          :page-count="list.pages"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="close">
      <el-form ref="dialogFormRef" :model="form" :rules="rules" style="padding-left: 140px">
        <el-form-item label="用户名" prop="username" label-width="100px">
          <el-input
            size="medium"
            style="width: 280px"
            v-model="form.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input
            size="medium"
            style="width: 280px"
            v-model="form.email"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          label-width="100px"
          v-show="title === '创建用户'"
        >
          <el-input
            size="medium"
            style="width: 280px"
            v-model="form.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色" label-width="100px">
          <el-input
            size="medium"
            style="width: 280px"
            v-model="form.role"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" label-width="100px">
          <el-select
            v-model="value"
            placeholder="请选择"
            @change="getId($event)"
          >
            <el-option
              v-for="item in simpleList"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" label-width="100px">
          <el-input
            size="medium"
            style="width: 280px"
            v-model="form.phone"
          ></el-input>
        </el-form-item>
        <el-form-item label="介绍" label-width="100px">
          <el-input
            style="width: 280px"
            type="textarea"
            :rows="2"
            placeholder="Please input"
            v-model="form.introduction"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/base/users'
import { simple } from '@/api/base/permissions'
export default {
  data () {
    return {
      update: {},
      title: '',
      value: '',
      simpleList: [],
      form: {
        avatar: '',
        username: '',
        password: '',
        email: '',
        role: '',
        phone: '',
        introduction: '',
        permission_group_id: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      },
      list: {},
      dialogFormVisible: false,
      userList: {
        page: 1,
        pagesize: 10,
        username: ''
      }
    }
  },
  methods: {
    async close () {
      this.value = ''
      this.form = {}
      await this.$refs.dialogFormRef.resetFields()
    },
    del (row) {
      this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          remove(row)
          this.getList()
          this.$message({
            type: 'success',
            message: '成功删除了用户!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    async edit (row) {
      this.title = '编辑用户'
      const { data: res } = await simple()
      this.simpleList = res
      this.form = {}
      this.form = { ...row }
      this.value = row.permission_group_id
      delete this.form.permission_group_title
      delete this.form.create_time
      delete this.form.is_deleted
      delete this.form.last_update_time
      this.dialogFormVisible = true
    },
    async getList () {
      this.userList.page = 1
      const { data: res } = await list(this.userList)
      this.list = res
    },
    async addUser () {
      try {
        if (this.title === '创建用户') {
          await this.$refs.dialogFormRef.validate()
          await add(this.form)
          this.dialogFormVisible = false
          this.$message.success('添加成功')
          this.getList()
        } else {
          await update(this.form)
          this.dialogFormVisible = false
          this.$message.success('编辑成功')
          this.getList()
        }
      } catch (error) {
        console.dir(error)
      }
    },
    getId (e) {
      this.form.permission_group_id = e
    },
    async add () {
      this.title = '创建用户'
      const { data: res } = await simple()
      this.simpleList = res
      this.dialogFormVisible = true
    },
    async handleSizeChange (e) {
      this.userList.pagesize = e
      const { data: res } = await list(this.userList)
      this.list = res
    },
    async handleCurrentChange (e) {
      this.userList.page = e
      const { data: res } = await list(this.userList)
      this.list = res
    },
    async clear () {
      this.userList.page = 1
      this.userList.pagesize = 10
      this.userList.username = ''
      const { data: res } = await list(this.userList)
      this.list = res
    },
    async search () {
      const { data: res } = await list(this.userList)
      this.list = res
    }
  },
  async created () {
    const { data: res } = await list(this.userList)
    this.list = res
  }
}
</script>

<style scoped lang="scss">
::v-deep .has-gutter {
  th {
    background-color: #fafafa;
  }
}
::v-deep .el-alert__icon {
  font-size: 18px;
}
::v-deep .el-table__header{
  border-bottom: 1px solid #e8e8e8;
}
.bottom {
  width: 100%;
  text-align: right;
}
.edit {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  transition: all 0.1s;
}
.edit:hover {
  background-color: #409eff;
  color: #ffffff;
}
.del {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.del:hover {
  background-color: #f56c6c;
}
.box {
  padding: 20px;
  .user-mian {
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    background-color: #ffffff;
    .search {
      width: 100%;
      height: 33px;
      display: flex;
      margin-bottom: 18px;
      .input {
        width: 200px;
        height: 32px;
      }
      .right {
        width: 100%;
        text-align: right;
      }
    }
  }
}
</style>
